<template>
	<view class="bottom-navigation">
		<view 
			class="nav-item"
			:class="{ active: currentPage === 'index' }"
			data-page="index"
			@tap="onTabTap"
		>
			<image class="nav-icon" :src="currentPage === 'index' ? '/static/home-active.svg' : '/static/home.svg'"></image>
			<text class="nav-text">首页</text>
		</view>
		
		<view 
			class="nav-item"
			:class="{ active: currentPage === 'message' }"
			data-page="message"
			@tap="onTabTap"
		>
			<image class="nav-icon" :src="currentPage === 'message' ? '/static/message-active.svg' : '/static/message.svg'"></image>
			<text class="nav-text">消息</text>
		</view>
		
		<view class="publish-btn" @tap="onPublishTap">
			<view class="publish-icon">
				<text class="plus-cross">+</text>
			</view>
		</view>
		
		<view 
			class="nav-item"
			:class="{ active: currentPage === 'ranking' }"
			data-page="ranking"
			@tap="onTabTap"
		>
			<image class="nav-icon" :src="currentPage === 'ranking' ? '/static/ranking-active.svg' : '/static/ranking.svg'"></image>
			<text class="nav-text">排行榜</text>
		</view>
		
		<view 
			class="nav-item"
			:class="{ active: currentPage === 'profile' }"
			data-page="profile"
			@tap="onTabTap"
		>
			<image class="nav-icon" :src="currentPage === 'profile' ? '/static/profile-active.svg' : '/static/profile.svg'"></image>
			<text class="nav-text">我的</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 当前页面标识
			currentPage: {
				type: String,
				default: 'index'
			}
		},
		methods: {
			// 导航栏点击事件
			onTabTap: function(e) {
				const page = e.currentTarget.dataset.page;
				
				// 如果点击的是当前页面，不进行跳转
				if (page === this.currentPage) {
					return;
				}
				
				// 触发父组件的导航事件
				this.$emit('navigate', { page: page });
				
				// 进行页面跳转
				switch(page) {
					case 'index':
						uni.navigateTo({ url: '/pages/index/index' });
						break;
					case 'message':
						uni.navigateTo({ url: '/pages/message/message' });
						break;
					case 'ranking':
						uni.navigateTo({ url: '/pages/ranking/ranking' });
						break;
					case 'profile':
						uni.navigateTo({ url: '/pages/profile/profile' });
						break;
				}
			},
			// 发布按钮点击事件
			onPublishTap: function(e) {
				console.log('点击发布按钮，跳转到发帖页面');
				
				// 直接跳转到发帖页面
				uni.navigateTo({
					url: '/pages/create-post/create-post',
					success: function() {
						console.log('成功跳转到发帖页面');
					},
					fail: function(err) {
						console.error('跳转发帖页面失败:', err);
						uni.showToast({
							title: '跳转失败，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style>
	.bottom-navigation {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20px);
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 12px 0 20px 0;
		border-top: 1px solid rgba(226, 232, 240, 0.8);
		z-index: 1000;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 8px 12px;
		border-radius: 16px;
		transition: all 0.3s ease;
		position: relative;
		flex: 1;
		max-width: 80px;
		background: transparent;
	}

	.nav-item:active {
		transform: scale(0.95);
		background: rgba(102, 126, 234, 0.1);
	}

	.nav-item.active {
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
		box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
	}

	.nav-icon {
		width: 26px;
		height: 26px;
		transition: all 0.3s ease;
	}

	.nav-text {
		font-size: 11px;
		color: #6b7280;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.nav-item.active .nav-text {
		color: #667eea;
		font-weight: 600;
	}

	.nav-item.active .nav-icon {
		transform: scale(1.1);
	}

	.publish-btn {
		position: relative;
		margin: 0 20px;
	}

	.publish-icon {
		width: 60px;
		height: 60px;
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
		transition: all 0.3s ease;
		position: relative;
		top: -10px;
	}

	.publish-icon:active {
		transform: scale(0.95);
		box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
	}

	.plus-cross {
		color: white;
		font-size: 42px;
		font-weight: 700;
		line-height: 1;
		position: relative;
		top: -6px;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
</style>


